<template>
  <el-upload
    :action="conf.action"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :before-remove="beforeRemove"
    v-bind="conf"
    :before-upload="beforeAvatarUpload"
    :file-list="fileList"
  >
    <el-button icon="el-icon-upload" :size="size" type="primary">
      {{ conf.__config__.buttonText }}
    </el-button>
    <div v-if="conf.__config__.showTip" slot="tip" class="el-upload__tip">
      <template v-if="conf.accept">只能上传{{ conf.accept }}文件</template>
      <template v-if="conf.__config__.fileSize && conf.accept">,</template>
      <template v-if="conf.__config__.fileSize">
        文件大小不能超过{{ conf.__config__.fileSize + conf.__config__.sizeUnit }}
      </template>
    </div>
  </el-upload>
</template>

<script>
export default {
  inject: ['formSize'],
  props: {
    value: {
      default: undefined
    },
    conf: {
      type: Object,
      default: () => ({})
    }
    // formConf: {
    //   type: Object,
    //   default: () => ({})
    // }
  },
  data() {
    return {
      fileList: []
    }
  },
  computed: {
    size() {
      return this.formSize?.() ?? 'small'
    }
  },
  watch: {
    conf: {
      handler(val) {
        // console.log(this.formConf, 'formConfformConfformConf')
        this.$nextTick(() => {
          console.log(this.conf.disabled)
        })
      },
      immediate: true
    }
  },
  created() {
    this.fileList = this.value?.length <= 2 || this.value === undefined ? [] : JSON.parse(this.value)
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.emitValue(fileList)
    },
    handleRemove(file, fileList) {
      this.emitValue(fileList)
    },
    handlePreview(file) {
      const url = file.url ?? file.response?.url
      window.open(process.env.VUE_APP_BASE_API + url)
    },
    emitValue(fileList) {
      let files = fileList.map(({ response }) => response)
      files.length || (files = undefined)
      this.$emit('input', JSON.stringify(files))
    },

    // :on-exceed="handleExceed"
    // handleExceed(files, fileList) {
    //   this.$message.warning(
    //     `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length +
    //       fileList.length} 个文件`
    //   )
    // },
    beforeRemove(file, fileList) {
      if (file.status === 'ready') {
        return true
      } else {
        return this.$confirm(`确定移除 ${file.name}？`)
      }
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'

      // if (!isJPG) {
      //   this.$message.error('上传文件只能是 JPG 格式!')
      // }
      // this.conf.fileSize
      const sizeMap = {
        KB: 1024,
        MB: 1024 * 1024,
        GB: 1024 * 1024 * 1024
      }
      const { fileSize, sizeUnit } = this.conf.__config__
      if (!fileSize) {
        return true
      }
      const isLt2M = file.size < fileSize * sizeMap[sizeUnit]
      if (!isLt2M) {
        this.$message.error(`上传文件大小不能超过 ${fileSize + sizeUnit}!`)
      }
      return isLt2M
    }
  }
}
</script>
<style lang="scss"></style>
